<template>
  <el-container direction="vertical" class="technology-table-wrapper">
    <div class="technology-table-page" v-loading="technologyTableLoading" element-loading-text="拼命加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)">
      <div v-for="(item,index) in technologyData.data" :key="index+ '-only'" v-show="menuType === 'Girl'"
           @click="onEnterGirlDetail(item)">
        <el-card class="technology-card-girl" :body-style="{ padding: '0px' }" shadow="hover">
          <div class="girl-title-content">
            <div class="girl-type">{{item.author}}</div>
            <div class="girl-title">{{item.title}}</div>
          </div>
          <div class="girl-author">{{item.author}} <span>- </span>{{item.type}}</div>
          <img :src="item.url" class="girl-image-content"/>
          <div class="girl-introduce">
            {{item.desc}}
          </div>
        </el-card>
      </div>
      <div v-for="(item,index) in technologyData.data" :key="index" v-show="menuType !== 'Girl'" @click="onEnterArticleDetail(item)">
        <el-card class="technology-card" :body-style="{ padding: '0px' }" shadow="hover">
          <img :src="item.images"
               class="technology-card-image">
          <div class="technology-card-content">
            <span class="technology-type">{{item.type}}</span> <span class="technology-title">{{item.title}}</span>
            <div class="technology-introduce">
              {{item.desc}}
            </div>
            <div class="technology-info">
              <i class="el-icon-date"></i>
              <span class="technology-create-time">{{item.createdAt}}</span>
              <span class="technology-author">{{item.author}}</span>
            </div>

          </div>
        </el-card>
      </div>
    </div>
    <el-pagination class="technology-page" background @current-change="pageCurrentChange"
                   :page-size="technologyData.page_count"
                   :current-page.sync="technologyData.page" layout="total,prev, pager, next, jumper"
                   :total="technologyData.total_counts">
    </el-pagination>
  </el-container>
</template>

<script>
  import { getGankTypeList } from '../../api/index'

  export default {
    name: 'TechnologyTable',
    props: {
      menuType: {
        type: String,
        default: 'Girl'
      },
      menuBigType: {
        type: String,
        default: 'Girl'
      }
    },
    data () {
      return {
        page: 1,
        technologyTableLoading: true,
        technologyData: {},
      }
    },
    mounted () {
      this.loadTechnologyList()
    },
    methods: {
      loadTechnologyList () {
        console.log('menyBigType::' + this.menuBigType)
        getGankTypeList({
          bigType: this.menuBigType,
          type: this.menuType,
          page: this.page
        }).then(data => {
          console.log('data:' + JSON.stringify(data))
          if (data.status === 100) {
            this.technologyData = data
          }
          this.technologyTableLoading = false
        }).catch(error => {
          console.log('error:' + JSON.stringify(error))
          this.technologyTableLoading = false
        })
      },
      pageCurrentChange (page) {
        this.page = page
        this.technologyTableLoading = true
        this.loadTechnologyList()
      },
      onEnterGirlDetail (item) {
        this.$store.commit('SAVE_MENU_STATE', false)
        let girlRouter = this.$router.resolve({
          path: '/girlDetailIndex',
          query: {
            id: item._id,
            type: 'gankio'
          }
        })
        window.open(girlRouter.href, '_blank')
      },
      onEnterArticleDetail (item) {
        this.$store.commit('SAVE_MENU_STATE', false)
        let girlRouter = this.$router.resolve({
          path: '/articleDetailIndex',
          query: {
            id: item._id,
          }
        })
        window.open(girlRouter.href, '_blank')
      }
    },
    watch: {
      menuType (value) {
        this.technologyTableLoading = true
        this.page = 1
        this.loadTechnologyList()
      }
    }
  }
</script>

<style lang="scss" ref="stylesheet/scss" scoped>
  .technology-table-wrapper {
    width: calc(100% - 80px);
    height: 100%;
    margin-left: 40px;
    margin-right: 40px;

    .technology-table-page {
      width: 60%;
      margin: 0 auto;

      .technology-card-girl {
        cursor: pointer;
        text-align: left;
        height: 430px;
        border: 1px solid transparent;
        margin-top: 20px;
        border-radius: 8px;
        padding: 10px;
        background-color: rgba(29, 31, 32, 1);
        width: 100%;

        .girl-title-content {
          width: 100%;
          height: 25px;
          line-height: 25px;

          .girl-type {
            background-color: #4FA8FF;
            border-radius: 3px;
            padding: 0 5px;
            color: #F2F2F2;
            float: left;
          }

          .girl-title {
            float: left;
            color: white;
            margin-left: 5px;
            font-size: 20px;
          }
        }

        .girl-author {
          color: white;
          margin-top: 10px;
        }

        .girl-image-content {
          margin-top: 10px;
          background-color: #2F4B6B;
          position: relative;
          width: 100%;
          border-radius: 8px;
          height: 300px;
          object-fit: cover;
        }

        .girl-introduce {
          color: white;
          margin-top: 15px;
          margin-bottom: 10px;
        }
      }

      .technology-card {
        border: 1px solid transparent;
        background-color: rgba(29, 30, 31, 1);
        margin-top: 30px;
        width: calc(100% - 20px);
        padding: 10px;
        height: 220px;
        border-radius: 5px;
        margin-left: 3.2%;

        .technology-card-image {
          width: 24%;
          display: block;
          object-fit: cover;
          border-radius: 5px;
          height: 200px;
          float: left;
          transition: all 0.6s;
        }

        .technology-card-content {
          position: relative;
          width: 72%;
          margin-left: 2%;
          height: 200px;
          text-align: left;
          float: left;
          background-color: rgba(29, 30, 31, 1);
          color: white;

          .technology-type {
            font-size: 12px;
            height: 30px;
            padding: 4px 8px;
            border-radius: 3px;
            background-color: #2C63FF;
            color: white;
          }

          .technology-title {
            padding: 4px 8px;
            font-size: 18px;
            font-weight: bold;
          }

          .technology-introduce {
            display: block;
            margin-top: 25px;
            color: #F2F2F2;
          }

          .technology-info {
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;

            .technology-create-time {
              margin-left: 10px;
            }
            .technology-author {
              margin-left: 10px;
              margin-right: 10px;
            }
          }
        }

        &:hover {
          .technology-card-image {
            transform: scale(1.02);
            -ms-transform: scale(1.02);
          }
        }
      }
    }

    .technology-page {
      margin-top: 20px;
    }

  }

</style>
